<template>
  <div>
    <div class="part-title divider-inside">Part VII Summary</div>
    <div class="table-summary">
      <div class="table-header divider-inside">
        <div class="col-start">
          ATA<br />
          Chapter
        </div>
        <div>
          Servicing<br />
          Ground Haning<br />
          (SGH)
        </div>
        <div>
          Removal<br />
          Installation<br />
          (R/I)
        </div>
        <div>
          Trouble<br />
          Shooting<br />
          (TS)
        </div>
        <div>
          Funtional<br />
          Operational Test<br />
          (FOT)
        </div>
        <div>
          Detailed Visual<br />
          Inspection<br />
          (ISP)
        </div>
        <div>
          Maintenance<br />
          pratice<br />
          (MP)
        </div>
      </div>
      <div class="table-body">
        <div class="row-item divider-inside" v-for="(item,index) in data" :key="index">
          <div class="col-start">{{item.ata}}</div>
          <div>{{item.sgh}}</div>
          <div>{{item.ri}}</div>
          <div>{{item.ts}}</div>
          <div>{{item.fot}}</div>
          <div>{{item.isp}}</div>
          <div>{{item.mp}}</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { inject } from "vue";

const journalData: any = inject("journalData");
const data = journalData.value[8].data;
</script>
<style scoped lang="less">
@import url("../less/index.less");
.table-summary {
  .border();
  text-align: center;
  .table-header,
  .table-body .row-item {
    display: flex;
    & > div {
      flex: 1;
      &.col-start {
        flex: 0 1 auto;
        width: 400px;
      }
    }
  }
  .table-header > div,
  .row-item > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
    min-height: 60px;
    .border-right();
    padding: 20px;
    box-sizing: border-box;
    &:last-child {
      border: none;
    }
  }
  .row-item {
    .border-top();
    & > div {
      padding: 10px;
    }
  }
}
</style>
